import React, { CSSProperties, useState } from 'react';
import styles from './container.less';
import { Carousel } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import oneBanner from '../../assets/one.png';
import twoBanner from '../../assets/two.png';
import threeBanner from '../../assets/three.png';
import fourBanner from '../../assets/four.png';

const arrowStyle: CSSProperties = {
  position: 'absolute',
  color: '#e0e0e0',
  top: '12px',
  right: '20px',
  fontSize: '16px',
  fontWeight: 800,
};
export default () => {
  const [activeSubInx, setActiveSubInx] = useState('');

  return (
    <div className={styles.container}>
      <div className={styles.left}>
        <ul>
          <li
            onMouseOver={() => {
              setActiveSubInx('one');
            }}
            onMouseLeave={() => {
              setActiveSubInx('');
            }}
          >
            <a href="">
              手机 电话卡
              <RightOutlined style={arrowStyle} />
            </a>
            <div
              className={styles.subCate}
              style={activeSubInx == 'one' ? {} : { display: 'none' }}
            >
              <ul>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
              </ul>
              <ul>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
              </ul>
              <ul>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
              </ul>
              <ul>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
                <li>
                  <img
                    src="https:///cdn.cnbj1.fds.api.mi-img.com/mi-mall/b0f790442e629d548f65a3f3902b7d0a.png?thumb=1&amp;w=40&amp;h=40&amp;f=webp&amp;q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>腾讯黑鲨游戏手机3</span>
                </li>
              </ul>
            </div>
          </li>
          <li
            onMouseOver={() => {
              setActiveSubInx('two');
            }}
            onMouseLeave={() => {
              setActiveSubInx('');
            }}
          >
            <a href="">
              电视 盒子
              <RightOutlined style={arrowStyle} />
            </a>
            <div
              className={styles.subCate}
              style={activeSubInx == 'two' ? {} : { display: 'none' }}
            >
              <ul>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
              </ul>
              <ul>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
              </ul>
              <ul>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
              </ul>
              <ul>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
                <li>
                  <img
                    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/23316088a9182a08c624958319924d8d.png?thumb=1&w=40&h=40&f=webp&q=90"
                    width="40"
                    height="40"
                    alt=""
                  />
                  <span className={styles.text}>小米电视5 55寸</span>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="">
              笔记本 显示器 平板
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              家电 插线板
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              出行 穿戴
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              智能 路由器
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              电源 配件
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              健康 儿童
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              耳机音箱 儿童
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
          <li>
            <a href="">
              生活 箱包
              <RightOutlined style={arrowStyle} />
            </a>
          </li>
        </ul>
      </div>
      <div className={styles.carousel}>
        <Carousel autoplay={true}>
          <div className={styles.banner}>
            <img src={fourBanner} alt="" />
          </div>
          <div className={styles.banner}>
            <img src={oneBanner} alt="" />
          </div>
          <div className={styles.banner}>
            <img src={twoBanner} alt="" />
          </div>
          <div className={styles.banner}>
            <img src={threeBanner} alt="" />
          </div>
        </Carousel>
      </div>

      <div className={`${styles.bot} clearfix`}>
        <div className={styles.span4}>
          <ul className={`clearfix`}>
            <li>
              <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" />
                <span>小米秒杀</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" />
                <span>企业团购</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" />
                <span>F码通道</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&amp;h=48" />
                <span>米粉卡</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&amp;h=48" />
                <span>以旧换新</span>
              </a>
            </li>
            <li>
              <a href="">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&amp;h=48" />
                <span>话费充值</span>
              </a>
            </li>
          </ul>
        </div>
        <div className={styles.span16}>
          <ul>
            <li>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7bc54a61b927dd8c54ddd39a0acf0254.jpg?w=632&h=340"
                alt=""
              />
            </li>
            <li>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c74e01afe50a86c3a87ff030b85781.jpg?w=632&h=340"
                alt=""
              />
            </li>
            <li>
              <img
                src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
                alt=""
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};
